<template>
    <div class="content">
        <div class="title-font">
            计费管理 / 缴费类性管理
        </div>
        <div class="marketing" >
            <div class='marketing-content'>
                <el-row :gutter="10">
                    <el-col :span="4">
                        <el-input v-model="paymoney" placeholder="项目价格" />
                    </el-col>
                    <el-col :span="4">
                        <el-select
                                v-model="paystatus"
                                clearable
                                placeholder="通知状态">
                            <el-option v-for="item in statusList"
                                       :label="item.text"
                                       :key="item.value"
                                       :value="item.value">
                            </el-option>
                        </el-select>
                    </el-col>
                    <el-col :span="16" align="right">
                        <span class="list-title" style="float: left;margin-left: 30px;font-weight: bold;font-size: 1.5em">{{message}}</span>
                        <el-button type="primary" icon="el-icon-search" @click="search">查询</el-button>
                        <el-button type="success" icon="el-icon-plus" @click='add' v-show="this.type == '1'">新增</el-button>
                        <el-button type="primary" icon="el-icon-refresh" @click="reset">刷新</el-button>
                        <el-button type="primary" icon="el-icon-upload2" @click="outport">导出</el-button>
                    </el-col>
                </el-row>
                <el-row :gutter="10" style="margin-top: 2%;">
                    <el-col :span="12" style="width: 35%">
                        <el-tree
                                :data="treeData"
                                :highlight-current=true
                                :default-expanded-keys="[7,8,11]"
                                node-key="id"
                                @node-click="searchClick">
                        </el-tree>
                    </el-col>
                    <el-col :span="12"  style="width: 65%">
                        <el-table :data="tableData" :border=true :stripe=true height="452" v-loading="loading"  border
                                  :header-cell-style="{'background':'#eef1f6','color':'#1f2d3d','border-color':'#dfe6ec'}"
                                  style="width: 100%;font-size: 14px;color: #1f2d3d" element-loading-text="拼命加载中">
                            <el-table-column prop="payname" align="center" label="缴费项目名称" ></el-table-column>
                            <el-table-column prop="paylevel" align="center" label="缴费项目优先级"></el-table-column>
                            <el-table-column prop="paynum" align="center" label="项目用量/时长"></el-table-column>
                            <el-table-column prop="paymoney" align="center" sortable label="项目价格"></el-table-column>
                            <el-table-column prop="paytime" align="center" sortable label="创建时间" :formatter="dateFormat"></el-table-column>
                            <el-table-column prop="username" align="center" label="通知人" :formatter="showFormatter"></el-table-column>
                            <el-table-column prop="paystatus" align="center" label="状态" :formatter="typeFormatter"></el-table-column>
                            <el-table-column  label="操作" align="center" min-width="130" v-if="this.type == '1'">
                                <template slot-scope="scope">
                                    <div style="display: flex">
                                        <el-button :plain="true"
                                                   size="mini"
                                                   style="background-color: #fff;font-size: 12px"
                                                   @click="notice(scope.row, scope.$index)"
                                        >通知</el-button>
                                        <el-button :plain="true"
                                                   size="mini"
                                                   style="color: #62a8ea;background-color: #fff;font-size: 12px"
                                                   @click="detail(scope.row)"
                                        >查看</el-button>
                                        <el-button :plain="true"
                                                   size="mini"
                                                   style="font-size: 12px;color: black;background-color: #fff"
                                                   @click="deleteData(scope.row, scope.$index)"
                                                   type="danger">作废
                                        </el-button>
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column  label="操作" align="center" min-width="130" v-else>
                                <template slot-scope="scope">
                                    <div>
                                        <el-button :plain="true"
                                                   size="mini"
                                                   type="text"
                                                   style="color: #62a8ea;background-color: #fff;font-size: 12px;width: 60%;"
                                                   @click="detail(scope.row)"
                                        >查看计费类型</el-button>
                                    </div>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-col>
                </el-row>
                <div class="block">
                    <el-pagination @current-change="handleCurrentChange"
                                   layout="total, sizes,prev, pager, next, jumper"
                                   :current-page.sync="iPagination.current"
                                   :page-size='iPagination.pageSize'
                                   :page-sizes="iPagination.pageSizeOptions"
                                   :total="iPagination.total"
                                   background
                                   @size-change="handleSizeChange">
                    </el-pagination>
                </div>
            </div>
        </div>
        <pay-dialog ref="payDialog"></pay-dialog>
    </div>
</template>

<script>
    import dateFunc from '@/utils/dateFunc'
    import moment from 'moment'
    import { export2Excel } from '@/utils/util'
    import payDialog from './payDialog'
    export default {
        name: "payIndex",
        components:{
          payDialog
        },
        data(){
            return{
                type: '',
                loading: false,
                iPagination: {
                    current: 1,
                    pageSize: 9,
                    pageSizeOptions: [9, 10, 20, 50],
                    total: 0,
                    "page": 0,
                    "pageSize": 9,
                },
                form:{text:''},
                statusList:[
                    {
                        value: 1,
                        text: '已通知'
                    },
                    {
                        value: 2,
                        text: '未通知'
                    }
                ],
                paymoney: '',
                paystatus: '',
                tableData:[],
                columns:[{title:'缴费项目名称',key:'payname'}, {title:'缴费项目优先级',key:'paylevel'},
                    {title:'项目用量',key:'paynum'}, {title:'项目价格',key:'paymoney'},
                    {title:'创建时间',key:'paytime'},{title:'通知状态',key:'paystatus'}
                ],
                treeData: [{
                    id: 1,
                    label: '缴费项目',
                    children: [{
                        id: 2,
                        label: '电费项目',
                        children: [{
                            id: 7,
                            label: '电费目录表'
                        }],
                    },{
                        id: 3,
                        label: '水费项目',
                        children: [{
                            id: 8,
                            label: '水费固定月目录表'
                        },{
                            id: 9,
                            label: '水费按量计价目录表'
                        }],
                    },{
                        id: 4,
                        label: '天然气项目',
                        children: [{
                            id: 10,
                            label: '天然气目录表'
                        }],
                    },{
                        id: 5,
                        label: '物业费项目',
                        children: [{
                            id: 11,
                            label: '物业费目录表'
                        }],
                    },{
                        id: 6,
                        label: '宽带费项目',
                        children: [{
                            id: 12,
                            label: '宽带费目录表'
                        }],
                    }],

                }],
                dialogTableVisible: false
            }
        },
        computed: {

        },
        created(){
            this.$axiosToken({
                url: '/users/getUserByToken',
                method: 'get',
                data: {},
                success:(result=>{
                    this.type = result.type
                })
            });
            // 默认展开电费目录
            this.c_id = 7;
            this.message = '电费目录'
        },
        mounted(){
            this.getCostData()
        },

        methods:{
            // 获取树节点id
            searchClick(data,node){
                console.log("点击节点", data, node);
                this.c_id = node.key;
                this.getCostData();
                // 目录span对应
                if (this.c_id == 7){
                    this.message = '电费目录'
                }else if(this.c_id == 8){
                    this.message = '水费固定月目录'
                }else if (this.c_id == 9){
                    this.message = '水费按量目录'
                }else if (this.c_id == 10){
                    this.message = '天然气目录'
                }else if (this.c_id == 11){
                    this.message = '物业费目录'
                }else if (this.c_id == 12) {
                    this.message = '宽带费目录'
                }else {
                    this.message = ''
                }
                console.log(this.c_id,555)
            },

            // 分页导航
            handleCurrentChange (val) {
                this.iPagination.current = val;
                this.getCostData()
            },
            handleSizeChange (val) {
                this.iPagination.current = 1;
                this.iPagination.pageSize = val;
                this.getCostData()
            },
            // 获取列表
            getCostData(){
                this.loading = true;
                this.$Axios({
                    url: '/cost/getCostData',
                    method: 'get',
                    data:{
                        c_id: this.c_id,
                        paymoney: this.paymoney,
                        paystatus: this.paystatus,
                        currPage: this.iPagination.current - 1,
                        pageNum: this.iPagination.pageSize,
                    },
                    success:(result)=>{
                        this.tableData = result.data;
                        this.iPagination.total = result.total;
                        setTimeout(() => {
                            this.loading = false;
                        }, 200);
                    }
                })
            },
            // 查询
            search(){
                this.iPagination.current = 1;
                this.getCostData()
            },
            // 导出
            outport(){
                export2Excel(this.columns,this.tableData)
            },
            // 添加
            add(){
              this.$router.push({
                  name: 'payAdd',
                  query:{
                      type: 'ADD',
                      paystatus: this.statusList[1].value // 新增是默认状态是未通知
                  }
              })
            },
            detail(row){
                this.$router.push({
                    name: 'payAdd',
                    query:{
                        type: 'DETAIL',
                        detailId: row.id
                    }
                })
            },

            // 作废
            deleteData(row,index){
                this.$confirm('确定永久作废这条计费项目?','提示',{
                    type: "warning"
                }).then(()=>{
                    this.$axiosToken({
                        url: '/cost/delCostData',
                        method: 'get',
                        data:{id: row.id},
                        success: (result) =>{
                            this.$message({
                                message: '作废计费项目成功',
                                type: 'success',
                                duration: 2000
                            });
                            this.getCostData()
                        }
                    }).catch((reason)=>{
                        alert('删除失败'+reason)
                    })
                }).catch(()=>{
                    this.$message({
                        type: 'info',
                        message: '已取消作废该条计费项目',
                        duration: 2000
                    })
                })
            },

            // 通知
            notice(row,index){
                this.$refs.payDialog.dialogTableVisible = true;
                this.$refs.payDialog.init(row)
            },


            // 刷新
            reset(){
                this.paymoney = '';
                this.paystatus = '';
                this.search()
            },

            // 时间格式转化
            dateFormat(row,column) {
                var date = row[column.property];
                if(date == undefined){
                    return ''
                }else {
                    return moment(date).format("YYYY-MM-DD")

                }
            },
            // 状态转为文字
            typeFormatter(row,column){
                const paystatus = row.paystatus
                if (paystatus == 1){
                    return '已通知'
                }else {
                    return '未通知'
                }
            },
            // 显示数据状态
            showFormatter(row,column){
                if (row.username == undefined){
                    return '暂无'
                }else {
                    return row.username
                }
            },

        },
    }
</script>

<style scoped>
    .content{
        width: 99.5%;
    }
    .title-font{
        font-size: 16px;
        font-weight: 600;
        padding:1em;
    }
    .block{
        float: right;
        margin-top: 10px;
    }
    /deep/ .el-input__inner{
        font-size: 14px;
        height: 36px;
    }
    /deep/ .el-button{
        height: 36px;
        font-size: 14px;
    }
    /deep/ .el-button--mini, .el-button--mini.is-round{
       height: 26px;
        width: 48px;
    }
    /deep/.el-button--mini, .el-button--mini.is-round {
        padding: 7px 10px;
        text-align: center;
    }
    /deep/ .el-button--mini, .el-button--small{
        border-radius: 4px;
    }
    /deep/ .el-input.el-input--mini.el-input--suffix>.el-input__inner{
        height: 28px;
    }
    /deep/.el-tree-node__label {
        font-size: 14px;
    }

</style>